<!-- kriging 屏幕自适应插件下载：cnpm i --save lib-flexible -->
<template>
  <div> 
    <tifLayers :viewer="viewer"></tifLayers>
    <canvas id="canvasMap" style="display:none;"></canvas>
    <div id="cesiumContainer">
    <div class="leftbox" ref="leftbox">  
    <div ref="myChart1" class="myChart1">表格1</div>
    <div ref="myChart2" class="myChart2">表格2</div>
    <div ref="myChart3" class="myChart3">表格3</div>
    </div>
    <div class="rightbox" ref="rightbox">    
    <div ref="myChart4" class="myChart4">表格4</div>
    <div ref="myChart5" class="myChart5">表格5</div>
    <div ref="myChart6" class="myChart6">表格6</div>
    </div>
       <div ref="infopopup"  class="infopopup"></div>
       <!-- <select ref="list"  class="list" >
        <option value="" selected class="listitem"><strong>气象因子</strong></option>
        <option value="">年均温度</option>
        <option value="">年降雨量</option>
        <option value="">789月份降雨量</option>
       </select> -->
  </div>
</div>

</template>

<script>
import * as echarts from 'echarts'
import axios from 'axios'
// import kriging from '../common/js/kriging.min'
// import temperature from '../common/js/datacopy2'
// import bounds from '../common/js/bounds'
// import kriging from '../common/js/kriging'
import tifLayers from './tifLayers'
export default {
  components: {
    tifLayers,
  },
  data() {
    return {
      viewer: null,
          };
  },
  methods: {
    // 初始化 cesium 应用程序
    initViewer() {
      var esri = new Cesium.ArcGisMapServerImageryProvider({ //此处为ArcGIS的数据源
            url:'https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer'
        })
      Cesium.Ion.defaultAccessToken =
        "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI2MTkxODY3Zi1iZTNiLTRlZjktOTIzNS04OGRiYTUxYmNkYjYiLCJpZCI6ODY2NjAsImlhdCI6MTY0NzkzODYwOX0.nue7HAVvjO5gEa9D0MbmGn34kPV8U6rSdfsgi76Sf0Y";
      console.log(this);
      this.viewer = new Cesium.Viewer("cesiumContainer",{
            infoBox:false,//隐藏右上角的id信息窗
            selectionIndicator: false,
            baseLayerPicker:false,  //将原来的底图隐藏
            imageryProvider:esri,   //提供新的底图来源
            terrainProvider:new Cesium.CesiumTerrainProvider({ //添加地形数据，获取地形数据的访问权限，CesiumTerrainProvider将地形数据转化为Cesium可以访问的数据
                url:Cesium.IonResource.fromAssetId(1), //放地形服务器的地址
                requestVertexNormals:true,      // 增加法线  提高光照效果
                requestWaterMask:true           //增加水面特效

            }),
            animation:true,//左下角播放事件动画的按钮
            timeline:true,//隐藏时间轴
      });
    
       // 修改homeButton的默认返回位置
      var _this = this;
      this.viewer.homeButton.viewModel.command.beforeExecute.addEventListener(function(e) {
          e.cancel = true;
          _this.viewer.camera.flyTo({
              destination: Cesium.Cartesian3.fromDegrees(109.5,36.7,300000),
          })
      })
      // this.viewer.dataSources.add(Cesium.GeoJsonDataSource.load('./bounds.geojson'));

      //加载延河流域轮廓geojson数据格式
      this.viewer.dataSources.add( 
        Cesium.GeoJsonDataSource.load('./yanhe_line.geojson')
      )
      this.viewer.camera.flyTo({
            destination:Cesium.Cartesian3.fromDegrees(109.5,36.7,300000), //设定相机的目的地
            orientation:{
                heading:Cesium.Math.toRadians(0),      //heading空值视口方向的水平旋转，也就是沿着Y轴旋转 0为正北方向；，Y为左右，Z为翻转
                pitch:Cesium.Math.toRadians(-90), //pitch空值沿着X轴，为上下旋转 ，-90为俯视
                roll:0  //翻转
            },
            duration:1 //设置飞行时间
        })

      var handler = new Cesium.ScreenSpaceEventHandler(this.viewer.canvas);
      handler.setInputAction(async  (event) => {
        console.log(1111, event);
        // this.viewer.selectedEntity = undefined;
        var pickRay = this.viewer.camera.getPickRay(event.position);
        var featuresPromise =
          await this.viewer.imageryLayers.pickImageryLayerFeatures(
            pickRay,
            this.viewer.scene
          );
        console.log("featuresPromise:", featuresPromise);

        if (featuresPromise[0].name) return;
          // 核心代码
        let GRAY_INDEX = featuresPromise[0].data.properties.GRAY_INDEX
        const div = document.createElement("div");
        div.innerHTML = `GRAY_INDEX:${GRAY_INDEX}`;
        this.viewer.container.append(div);

        this.viewer.scene.postRender.addEventListener(() => {
          let x = event.position.x;
          let y = event.position.y;
          div.style.cssText = `
            padding:4px;
            border-radius:4px;
            position:absolute;
            left:0;
            top:0;
            background:rgba(0,0,0,0.6);
            color:white;
            transform:translate3d(${Math.round(x)}px,${Math.round(y)}px, 0);
        `;
        });


      }, Cesium.ScreenSpaceEventType.LEFT_CLICK);

 },
    addPoints() {
  
       axios.get('http://localhost:3030/api/user').then((res) => {
              console.log(res);
               for(var i =0;i<=res.data.length;i++){
                  this.viewer.entities.add({
                    id:res.data[i].id,
                    position:Cesium.Cartesian3.fromDegrees(res.data[i].lng,res.data[i].lat,res.data[i].asl),//经纬度高度
                    // point:{
                    //     pixelSize:5,
                    //     color:new Cesium.Color(0,1,0,1)
                    // },
                    billboard:{
                      image:require('../../public/image/(227)2000x2000.png'),
                      show:true,
                      scale:0.8,
                      // color: Cesium.Color.WHITE.withAlpha(0.8),
                      height: 50,
                      width: 50,
                      // rotation: 20,
                      sizeInMeters: false,
                      verticalOrigin: Cesium.VerticalOrigin.CENTER,
                      horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
                      pixelOffset: new Cesium.Cartesian2(0, 0),

                    },

                    // 设置标签的大小位置颜色
                    // label:{ 
                    // text:res.data[i].classofvegetation,
                    // font:'20px Helvetica',
                    // fillColor:Cesium.Color.WHITE,
                    // },
              });
          }
        })
  
      },
    //添加鼠标左键单击事件
    leftClick() {        
        axios.get('http://localhost:3030/api/user').then((res) => {
            var handler = new Cesium.ScreenSpaceEventHandler(this.viewer.canvas)
            var that = this;
            handler.setInputAction(function(event){  
            var pick = that.viewer.scene.pick(event.position);
               if(Cesium.defined(pick))              // && (pick.id.id === 'green')
               {        //判断位置信息是否为空 && 当前所选定的对象id号是否和要弹窗的id号一致
                  that.$refs.infopopup.style.display = 'block'
                  that.$refs.infopopup.innerHTML = '<strong>基础信息:</strong><br /><br />位置：' + res.data[pick.id.id].lng + 'E,  '+ res.data[pick.id.id].lat +'N'+ ',<br />海拔：' +res.data[pick.id.id].asl+'m'+ '，<br />坡度：' +res.data[pick.id.id].slope+'°'+ '，<br />坡向：' +res.data[pick.id.id].asp+ '，<br />土壤类型：' +res.data[pick.id.id].classofsoil+ '，<br />植被类型：' +res.data[pick.id.id].classofvegetation+ '，<br />优势种：' +res.data[pick.id.id].dominantspecies+ '，<br />备注：' +res.data[pick.id.id].remark
                  console.log(pick);
                  // alert('采样点信息:\n位置：' + res.data[pick.id.id].lng + 'E,  '+ res.data[pick.id.id].lat +'N'+ ',\n海拔：' +res.data[pick.id.id].asl+'m'+ '，\n坡度：' +res.data[pick.id.id].slope+'°'+ '，\n坡向：' +res.data[pick.id.id].asp+ '，\n土壤类型：' +res.data[pick.id.id].classofsoil+ '，\n植被类型：' +res.data[pick.id.id].classofvegetation+ '，\n优势种：' +res.data[pick.id.id].dominantspecies+ '，\n备注：' +res.data[pick.id.id].remark);   //满足条件则弹窗
                 //表格1
                  that.$refs.leftbox.style.display = 'flex'
                  that.$refs.rightbox.style.display = 'flex'
                  var myChart1= echarts.init(that.$refs.myChart1)                         
                  myChart1.setOption({
                          title:{ //标题
                          text:'叶片厚度(LT)', //主标题
                          x:'center', //设置居中
                          y:'25px',
                          textStyle:{
                            color:'white',
                            fontSize:15
                          },                        
                          // backgroundColor:''设置背景颜色 
                          //borderColor 设置边框颜色
                          // borderWidth 设置边框宽度
                          // link:'' 添加链接
                          // target:'self'当前页打开超链接
                           // subtext副标题
                           //sublink 副标题链接
                            },
                  tooltip:{ //设置自动提示弹框
                            trigger:'axis'
                          },
                
                  // legend:{ //设置图例
                  //         show:true,
                  //         top:'10%', //设置图例位置
                  //         textStyle:{
                  //           // color:'red',
                  //           fontSize:30
                  //         }
                  // },
                  xAxis://配置x轴的参数
                  {
                    type:'category', //当前坐标轴的类型 数据value/类目category  
                    data:['达乌里胡枝子','白羊草','铁杆蒿','长芒草','丛生隐子草','百里香','大针茅','茭蒿'],
                    axisLine:{ //坐标轴轴线
                    show:true,
                    lineStyle:{
                      color:'#fff'
                    }
                   },
                      axisTick:{ //刻度线
                      show:false,
                      inside:true,
                      lineStyle:{
                        color:'#fff',
                      }
                    },
                    axisLabel:{  //刻度线标签
                      interval:0,
                      color:'#fafafa'
                    },   //取消默认的间隔显示
                    nameTextStyle:{
                      color:'#fafafa' //坐标轴标签颜色
                    },
                  },


                  yAxis:{
                    show:true,
                    splitLine:{ //网格线
                      show:false
                    },
                   axisLine:{ //坐标轴轴线
                    show:true,
                    lineStyle:{
                      color:'#fff'
                    }
                   },
                    axisTick:{ //刻度线
                      show:true,
                      inside:true,
                      lineStyle:{
                        color:'#fff',
                        
                      }
                    },
                    axisLabel:{ //刻度线标签
                      color:'#fff'
                    }
                  },
                  series:[//系列  配置图表的类型
                    {
                      name:'叶片厚度(LT)',
                      type:'bar',  //系列名 设置当前的系列类别
                      data:[res.data[pick.id.id].ltdwlhzz,res.data[pick.id.id].ltbyc,res.data[pick.id.id].lttgh,res.data[pick.id.id].ltcmc,res.data[pick.id.id].ltcsyzc,res.data[pick.id.id].ltblx,res.data[pick.id.id].ltdzm,res.data[pick.id.id].ltjh],
                      barWidth:20,
                      //设置每个轴的系列颜色
                      itemStyle:{
                        normal:{
                          color:function(parmas){
                            let colorList = [
                              '#4078c0','#6cc644','#bd2c00','#c9510c','#6e5494','#fafafa','#f5f5f5','#333'
                            ]
                            return  colorList[parmas.dataIndex]
                          }
                        }
                      },

                      //最大值 最小值
                      // markPoint:{
                      //   data:[
                      //     {type:'max',
                      //     name:'最大值'
                      //     },
                      //      {type:'min',
                      //     name:'最小值'
                      //     },
                      //   ]
                      // },
                      //图表的标线
                      // markLine:{
                      //   data:[
                      //     {
                      //       type:'average',
                      //       name:'平均值'
                      //     }
                      //   ]
                      // }

                    }
                  ] 
                  
                })
                //表格2
                  var myChart2= echarts.init(that.$refs.myChart2)                         
                  myChart2.setOption({
                          title:{ //标题
                          text:'比叶面积(SLA)', //主标题
                          x:'center', //设置居中
                          y:'25px',
                          textStyle:{
                            color:'white',
                            fontSize:15
                          },                        
                          // backgroundColor:''设置背景颜色 
                          //borderColor 设置边框颜色
                          // borderWidth 设置边框宽度
                          // link:'' 添加链接
                          // target:'self'当前页打开超链接
                           // subtext副标题
                           //sublink 副标题链接
                            },
                  tooltip:{ //设置自动提示弹框
                            trigger:'axis'
                          },
                
                  // legend:{ //设置图例
                  //         show:true,
                  //         top:'10%', //设置图例位置
                  //         textStyle:{
                  //           // color:'red',
                  //           fontSize:30
                  //         }
                  // },
                  xAxis://配置x轴的参数
                  {
                    type:'category', //当前坐标轴的类型 数据value/类目category  
                    data:['达乌里胡枝子','白羊草','铁杆蒿','长芒草','丛生隐子草','百里香','大针茅','茭蒿'],
                    axisLine:{ //坐标轴轴线
                    show:true,
                    lineStyle:{
                      color:'#fff'
                    }
                   },
                      axisTick:{ //刻度线
                      show:false,
                      inside:true,
                      lineStyle:{
                        color:'#fff',
                      }
                    },
                    axisLabel:{  //刻度线标签
                      interval:0,
                      color:'#fafafa'
                    },   //取消默认的间隔显示
                    nameTextStyle:{
                      color:'#fafafa' //坐标轴标签颜色
                    },
                  },


                  yAxis:{
                    show:true,
                    splitLine:{ //网格线
                      show:false
                    },
                   axisLine:{ //坐标轴轴线
                    show:true,
                    lineStyle:{
                      color:'#fff'
                    }
                   },
                    axisTick:{ //刻度线
                      show:true,
                      inside:true,
                      lineStyle:{
                        color:'#fff',
                        
                      }
                    },
                    axisLabel:{ //刻度线标签
                      color:'#fff'
                    }
                  },
                  series:[//系列  配置图表的类型
                    {
                      name:'比叶面积(SLA)',
                      type:'bar',  //系列名 设置当前的系列类别
                      data:[res.data[pick.id.id].sladwlhzz,res.data[pick.id.id].slabyc,res.data[pick.id.id].slatgh,res.data[pick.id.id].slacmc,res.data[pick.id.id].slacsyzc,res.data[pick.id.id].slablx,res.data[pick.id.id].sladzm,res.data[pick.id.id].slajh],
                      barWidth:20,
                      //设置每个轴的系列颜色
                      itemStyle:{
                        normal:{
                          color:function(parmas){
                            let colorList = [
                              '#4078c0','#6cc644','#bd2c00','#c9510c','#6e5494','#fafafa','#f5f5f5','#333'
                            ]
                            return  colorList[parmas.dataIndex]
                          }
                        }
                      },

                      //最大值 最小值
                      // markPoint:{
                      //   data:[
                      //     {type:'max',
                      //     name:'最大值'
                      //     },
                      //      {type:'min',
                      //     name:'最小值'
                      //     },
                      //   ]
                      // },
                      //图表的标线
                      // markLine:{
                      //   data:[
                      //     {
                      //       type:'average',
                      //       name:'平均值'
                      //     }
                      //   ]
                      // }

                    }
                  ] 
                  
                })
                 //表格3
                var myChart3= echarts.init(that.$refs.myChart3)                         
                  myChart3.setOption({
                          title:{ //标题
                          text:'叶组织密度(LD)', //主标题
                          x:'center', //设置居中
                          y:'25px',
                          textStyle:{
                            color:'white',
                            fontSize:15
                          },                        
                          // backgroundColor:''设置背景颜色 
                          //borderColor 设置边框颜色
                          // borderWidth 设置边框宽度
                          // link:'' 添加链接
                          // target:'self'当前页打开超链接
                           // subtext副标题
                           //sublink 副标题链接
                            },
                  tooltip:{ //设置自动提示弹框
                            trigger:'axis'
                          },
                
                  // legend:{ //设置图例
                  //         show:true,
                  //         top:'10%', //设置图例位置
                  //         textStyle:{
                  //           // color:'red',
                  //           fontSize:30
                  //         }
                  // },
                  xAxis://配置x轴的参数
                  {
                    type:'category', //当前坐标轴的类型 数据value/类目category  
                    data:['达乌里胡枝子','白羊草','铁杆蒿','长芒草','丛生隐子草','百里香','大针茅','茭蒿'],
                    axisLine:{ //坐标轴轴线
                    show:true,
                    lineStyle:{
                      color:'#fff'
                    }
                   },
                      axisTick:{ //刻度线
                      show:false,
                      inside:true,
                      lineStyle:{
                        color:'#fff',
                      }
                    },
                    axisLabel:{  //刻度线标签
                      interval:0,
                      color:'#fafafa'
                    },   //取消默认的间隔显示
                    nameTextStyle:{
                      color:'#fafafa' //坐标轴标签颜色
                    },
                  },


                  yAxis:{
                    show:true,
                    splitLine:{ //网格线
                      show:false
                    },
                   axisLine:{ //坐标轴轴线
                    show:true,
                    lineStyle:{
                      color:'#fff'
                    }
                   },
                    axisTick:{ //刻度线
                      show:true,
                      inside:true,
                      lineStyle:{
                        color:'#fff',
                        
                      }
                    },
                    axisLabel:{ //刻度线标签
                      color:'#fff'
                    }
                  },
                  series:[//系列  配置图表的类型
                    {
                      name:'叶组织密度(LD)',
                      type:'bar',  //系列名 设置当前的系列类别
                      data:[res.data[pick.id.id].lddwlhzz,res.data[pick.id.id].ldbyc,res.data[pick.id.id].ldtgh,res.data[pick.id.id].ldcmc,res.data[pick.id.id].ldcsyzc,res.data[pick.id.id].ldblx,res.data[pick.id.id].lddzm,res.data[pick.id.id].ldjh],
                      barWidth:20,
                      //设置每个轴的系列颜色
                      itemStyle:{
                        normal:{
                          color:function(parmas){
                            let colorList = [
                              '#4078c0','#6cc644','#bd2c00','#c9510c','#6e5494','#fafafa','#f5f5f5','#333'
                            ]
                            return  colorList[parmas.dataIndex]
                          }
                        }
                      },

                      //最大值 最小值
                      // markPoint:{
                      //   data:[
                      //     {type:'max',
                      //     name:'最大值'
                      //     },
                      //      {type:'min',
                      //     name:'最小值'
                      //     },
                      //   ]
                      // },
                      //图表的标线
                      // markLine:{
                      //   data:[
                      //     {
                      //       type:'average',
                      //       name:'平均值'
                      //     }
                      //   ]
                      // }

                    }
                  ] 
                  
                })
                //表格3结束
                //表格4
                var myChart4= echarts.init(that.$refs.myChart4)                         
                  myChart4.setOption({
                          title:{ //标题
                          text:'叶有机碳含量(LC)', //主标题
                          x:'center', //设置居中
                          y:'25px',
                          textStyle:{
                            color:'white',
                            fontSize:15
                          },                        
                          // backgroundColor:''设置背景颜色 
                          //borderColor 设置边框颜色
                          // borderWidth 设置边框宽度
                          // link:'' 添加链接
                          // target:'self'当前页打开超链接
                           // subtext副标题
                           //sublink 副标题链接
                            },
                  tooltip:{ //设置自动提示弹框
                            trigger:'axis'
                          },
                
                  // legend:{ //设置图例
                  //         show:true,
                  //         top:'10%', //设置图例位置
                  //         textStyle:{
                  //           // color:'red',
                  //           fontSize:30
                  //         }
                  // },
                  xAxis://配置x轴的参数
                  {
                    type:'category', //当前坐标轴的类型 数据value/类目category  
                    data:['达乌里胡枝子','白羊草','铁杆蒿','长芒草','丛生隐子草','百里香','大针茅','茭蒿'],
                    axisLine:{ //坐标轴轴线
                    show:true,
                    lineStyle:{
                      color:'#fff'
                    }
                   },
                      axisTick:{ //刻度线
                      show:false,
                      inside:true,
                      lineStyle:{
                        color:'#fff',
                      }
                    },
                    axisLabel:{  //刻度线标签
                      interval:0,
                      color:'#fafafa'
                    },   //取消默认的间隔显示
                    nameTextStyle:{
                      color:'#fafafa' //坐标轴标签颜色
                    },
                  },


                  yAxis:{
                    show:true,
                    splitLine:{ //网格线
                      show:false
                    },
                   axisLine:{ //坐标轴轴线
                    show:true,
                    lineStyle:{
                      color:'#fff'
                    }
                   },
                    axisTick:{ //刻度线
                      show:true,
                      inside:true,
                      lineStyle:{
                        color:'#fff',
                        
                      }
                    },
                    axisLabel:{ //刻度线标签
                      color:'#fff'
                    }
                  },
                  series:[//系列  配置图表的类型
                    {
                      name:'叶有机碳含量(LC)',
                      type:'bar',  //系列名 设置当前的系列类别
                      data:[res.data[pick.id.id].lcdwlhzz,res.data[pick.id.id].lcbyc,res.data[pick.id.id].lctgh,res.data[pick.id.id].lccmc,res.data[pick.id.id].lccsyzc,res.data[pick.id.id].lcblx,res.data[pick.id.id].lcdzm,res.data[pick.id.id].lcjh],
                      barWidth:20,
                      //设置每个轴的系列颜色
                      itemStyle:{
                        normal:{
                          color:function(parmas){
                            let colorList = [
                              '#4078c0','#6cc644','#bd2c00','#c9510c','#6e5494','#fafafa','#f5f5f5','#333'
                            ]
                            return  colorList[parmas.dataIndex]
                          }
                        }
                      },

                      //最大值 最小值
                      // markPoint:{
                      //   data:[
                      //     {type:'max',
                      //     name:'最大值'
                      //     },
                      //      {type:'min',
                      //     name:'最小值'
                      //     },
                      //   ]
                      // },
                      //图表的标线
                      // markLine:{
                      //   data:[
                      //     {
                      //       type:'average',
                      //       name:'平均值'
                      //     }
                      //   ]
                      // }

                    }
                  ] 
                  
                })
                //表格4结束
                //表格5开始
                var myChart5= echarts.init(that.$refs.myChart5)                         
                  myChart5.setOption({
                          title:{ //标题
                          text:'叶全氮含量(LN)', //主标题
                          x:'center', //设置居中
                          y:'25px',
                          textStyle:{
                            color:'white',
                            fontSize:15
                          },                        
                          // backgroundColor:''设置背景颜色 
                          //borderColor 设置边框颜色
                          // borderWidth 设置边框宽度
                          // link:'' 添加链接
                          // target:'self'当前页打开超链接
                           // subtext副标题
                           //sublink 副标题链接
                            },
                  tooltip:{ //设置自动提示弹框
                            trigger:'axis'
                          },
                
                  // legend:{ //设置图例
                  //         show:true,
                  //         top:'10%', //设置图例位置
                  //         textStyle:{
                  //           // color:'red',
                  //           fontSize:30
                  //         }
                  // },
                  xAxis://配置x轴的参数
                  {
                    type:'category', //当前坐标轴的类型 数据value/类目category  
                    data:['达乌里胡枝子','白羊草','铁杆蒿','长芒草','丛生隐子草','百里香','大针茅','茭蒿'],
                    axisLine:{ //坐标轴轴线
                    show:true,
                    lineStyle:{
                      color:'#fff'
                    }
                   },
                      axisTick:{ //刻度线
                      show:false,
                      inside:true,
                      lineStyle:{
                        color:'#fff',
                      }
                    },
                    axisLabel:{  //刻度线标签
                      interval:0,
                      color:'#fafafa'
                    },   //取消默认的间隔显示
                    nameTextStyle:{
                      color:'#fafafa' //坐标轴标签颜色
                    },
                  },


                  yAxis:{
                    show:true,
                    splitLine:{ //网格线
                      show:false
                    },
                   axisLine:{ //坐标轴轴线
                    show:true,
                    lineStyle:{
                      color:'#fff'
                    }
                   },
                    axisTick:{ //刻度线
                      show:true,
                      inside:true,
                      lineStyle:{
                        color:'#fff',
                        
                      }
                    },
                    axisLabel:{ //刻度线标签
                      color:'#fff'
                    }
                  },
                  series:[//系列  配置图表的类型
                    {
                      name:'叶全氮含量(LN)',
                      type:'bar',  //系列名 设置当前的系列类别
                      data:[res.data[pick.id.id].lndwlhzz,res.data[pick.id.id].lnbyc,res.data[pick.id.id].lntgh,res.data[pick.id.id].lncmc,res.data[pick.id.id].lncsyzc,res.data[pick.id.id].lnblx,res.data[pick.id.id].lndzm,res.data[pick.id.id].lnjh],
                      barWidth:20,
                      //设置每个轴的系列颜色
                      itemStyle:{
                        normal:{
                          color:function(parmas){
                            let colorList = [
                              '#4078c0','#6cc644','#bd2c00','#c9510c','#6e5494','#fafafa','#f5f5f5','#333'
                            ]
                            return  colorList[parmas.dataIndex]
                          }
                        }
                      },

                      //最大值 最小值
                      // markPoint:{
                      //   data:[
                      //     {type:'max',
                      //     name:'最大值'
                      //     },
                      //      {type:'min',
                      //     name:'最小值'
                      //     },
                      //   ]
                      // },
                      //图表的标线
                      // markLine:{
                      //   data:[
                      //     {
                      //       type:'average',
                      //       name:'平均值'
                      //     }
                      //   ]
                      // }

                    }
                  ] 
                  
                })
                //表格5结束
                //表格6开始
                           var myChart6= echarts.init(that.$refs.myChart6)                         
                  myChart6.setOption({
                          title:{ //标题
                          text:'叶全磷含量(LP)', //主标题
                          x:'center', //设置居中
                          y:'25px',
                          textStyle:{
                            color:'white',
                            fontSize:15
                          },                        
                          // backgroundColor:''设置背景颜色 
                          //borderColor 设置边框颜色
                          // borderWidth 设置边框宽度
                          // link:'' 添加链接
                          // target:'self'当前页打开超链接
                           // subtext副标题
                           //sublink 副标题链接
                            },
                  tooltip:{ //设置自动提示弹框
                            trigger:'axis'
                          },
                
                  // legend:{ //设置图例
                  //         show:true,
                  //         top:'10%', //设置图例位置
                  //         textStyle:{
                  //           // color:'red',
                  //           fontSize:30
                  //         }
                  // },
                  xAxis://配置x轴的参数
                  {
                    type:'category', //当前坐标轴的类型 数据value/类目category  
                    data:['达乌里胡枝子','白羊草','铁杆蒿','长芒草','丛生隐子草','百里香','大针茅','茭蒿'],
                    axisLine:{ //坐标轴轴线
                    show:true,
                    lineStyle:{
                      color:'#fff'
                    }
                   },
                      axisTick:{ //刻度线
                      show:false,
                      inside:true,
                      lineStyle:{
                        color:'#fff',
                      }
                    },
                    axisLabel:{  //刻度线标签
                      interval:0,
                      color:'#fafafa'
                    },   //取消默认的间隔显示
                    nameTextStyle:{
                      color:'#fafafa' //坐标轴标签颜色
                    },
                  },


                  yAxis:{
                    show:true,
                    splitLine:{ //网格线
                      show:false
                    },
                   axisLine:{ //坐标轴轴线
                    show:true,
                    lineStyle:{
                      color:'#fff'
                    }
                   },
                    axisTick:{ //刻度线
                      show:true,
                      inside:true,
                      lineStyle:{
                        color:'#fff',
                        
                      }
                    },
                    axisLabel:{ //刻度线标签
                      color:'#fff'
                    }
                  },
                  series:[//系列  配置图表的类型
                    {
                      name:'叶全磷含量(LP)',
                      type:'bar',  //系列名 设置当前的系列类别
                      data:[res.data[pick.id.id].lpdwlhzz,res.data[pick.id.id].lpbyc,res.data[pick.id.id].lptgh,res.data[pick.id.id].lpcmc,res.data[pick.id.id].lpcsyzc,res.data[pick.id.id].lpblx,res.data[pick.id.id].lpdzm,res.data[pick.id.id].lpjh],
                      barWidth:20,
                      //设置每个轴的系列颜色
                      itemStyle:{
                        normal:{
                          color:function(parmas){
                            let colorList = [
                              '#4078c0','#6cc644','#bd2c00','#c9510c','#6e5494','#fafafa','#f5f5f5','#333'
                            ]
                            return  colorList[parmas.dataIndex]
                          }
                        }
                      },

                      //最大值 最小值
                      // markPoint:{
                      //   data:[
                      //     {type:'max',
                      //     name:'最大值'
                      //     },
                      //      {type:'min',
                      //     name:'最小值'
                      //     },
                      //   ]
                      // },
                      //图表的标线
                      // markLine:{
                      //   data:[
                      //     {
                      //       type:'average',
                      //       name:'平均值'
                      //     }
                      //   ]
                      // }

                    }
                  ] 
                  
                })
                // 表格6结束

                 } else {
                  that.$refs.infopopup.style.display = 'none'
                  that.$refs.leftbox.style.display = 'none'
                  that.$refs.rightbox.style.display = 'none'
                 }
        
        },Cesium.ScreenSpaceEventType.LEFT_CLICK);
        })
      
      },
    kriGing() {
    //   function loadkriging() {
    //     var canvas = document.getElementById("canvasMap");
    //     canvas.width = 2000;
    //     canvas.height = 2000;

    //     var n = temperature.tempture.length;
    //     var t = [];
    //     var x = [];
    //     var y = [];
    //     for (var i = 0; i < n; i++) {
    //         t.push(temperature.tempture[i].properties.Temperatur); // 权重值
    //         x.push(temperature.tempture[i].geometry.coordinates[0]); // x
    //         y.push(temperature.tempture[i].geometry.coordinates[1]); // y
    //     }
    //     var variogram = kriging.train(t, x, y, "exponential", 0, 100);

    //     var grid = kriging.grid(bounds, variogram, 0.05);

    //     var colors = ["#00A600", "#01A600", "#03A700", "#04A700", "#05A800", "#07A800", "#08A900", "#09A900", "#0BAA00", "#0CAA00", "#0DAB00", "#0FAB00", "#10AC00", "#12AC00", "#13AD00", "#14AD00", "#16AE00", "#17AE00", "#19AF00", "#1AAF00", "#1CB000", "#1DB000", "#1FB100", "#20B100", "#22B200", "#23B200", "#25B300", "#26B300", "#28B400", "#29B400", "#2BB500", "#2CB500", "#2EB600", "#2FB600", "#31B700", "#33B700", "#34B800", "#36B800", "#37B900", "#39B900", "#3BBA00", "#3CBA00", "#3EBB00", "#3FBB00", "#41BC00", "#43BC00", "#44BD00", "#46BD00", "#48BE00", "#49BE00", "#4BBF00", "#4DBF00", "#4FC000", "#50C000", "#52C100", "#54C100", "#55C200", "#57C200", "#59C300", "#5BC300", "#5DC400", "#5EC400", "#60C500", "#62C500", "#64C600", "#66C600", "#67C700", "#69C700", "#6BC800", "#6DC800", "#6FC900", "#71C900", "#72CA00", "#74CA00", "#76CB00", "#78CB00", "#7ACC00", "#7CCC00", "#7ECD00", "#80CD00", "#82CE00", "#84CE00", "#86CF00", "#88CF00", "#8AD000", "#8BD000", "#8DD100", "#8FD100", "#91D200", "#93D200", "#95D300", "#97D300", "#9AD400", "#9CD400", "#9ED500", "#A0D500", "#A2D600", "#A4D600", "#A6D700", "#A8D700", "#AAD800", "#ACD800", "#AED900", "#B0D900", "#B2DA00", "#B5DA00", "#B7DB00", "#B9DB00", "#BBDC00", "#BDDC00", "#BFDD00", "#C2DD00", "#C4DE00", "#C6DE00", "#C8DF00", "#CADF00", "#CDE000", "#CFE000", "#D1E100", "#D3E100", "#D6E200", "#D8E200", "#DAE300", "#DCE300", "#DFE400", "#E1E400", "#E3E500", "#E6E600", "#E6E402", "#E6E204", "#E6E105", "#E6DF07", "#E6DD09", "#E6DC0B", "#E6DA0D", "#E6D90E", "#E6D710", "#E6D612", "#E7D414", "#E7D316", "#E7D217", "#E7D019", "#E7CF1B", "#E7CE1D", "#E7CD1F", "#E7CB21", "#E7CA22", "#E7C924", "#E8C826", "#E8C728", "#E8C62A", "#E8C52B", "#E8C42D", "#E8C32F", "#E8C231", "#E8C133", "#E8C035", "#E8BF36", "#E9BE38", "#E9BD3A", "#E9BC3C", "#E9BB3E", "#E9BB40", "#E9BA42", "#E9B943", "#E9B945", "#E9B847", "#E9B749", "#EAB74B", "#EAB64D", "#EAB64F", "#EAB550", "#EAB552", "#EAB454", "#EAB456", "#EAB358", "#EAB35A", "#EAB35C", "#EBB25D", "#EBB25F", "#EBB261", "#EBB263", "#EBB165", "#EBB167", "#EBB169", "#EBB16B", "#EBB16C", "#EBB16E", "#ECB170", "#ECB172", "#ECB174", "#ECB176", "#ECB178", "#ECB17A", "#ECB17C", "#ECB17E", "#ECB27F", "#ECB281", "#EDB283", "#EDB285", "#EDB387", "#EDB389", "#EDB38B", "#EDB48D", "#EDB48F", "#EDB591", "#EDB593", "#EDB694", "#EEB696", "#EEB798", "#EEB89A", "#EEB89C", "#EEB99E", "#EEBAA0", "#EEBAA2", "#EEBBA4", "#EEBCA6", "#EEBDA8", "#EFBEAA", "#EFBEAC", "#EFBFAD", "#EFC0AF", "#EFC1B1", "#EFC2B3", "#EFC3B5", "#EFC4B7", "#EFC5B9", "#EFC7BB", "#F0C8BD", "#F0C9BF", "#F0CAC1", "#F0CBC3", "#F0CDC5", "#F0CEC7", "#F0CFC9", "#F0D1CB", "#F0D2CD", "#F0D3CF", "#F1D5D1", "#F1D6D3", "#F1D8D5", "#F1D9D7", "#F1DBD8", "#F1DDDA", "#F1DEDC", "#F1E0DE", "#F1E2E0", "#F1E3E2", "#F2E5E4", "#F2E7E6", "#F2E9E8", "#F2EBEA", "#F2ECEC", "#F2EEEE", "#F2F0F0", "#F2F2F2"];

    //     kriging.plot(canvas, grid, [73.4766, 135.088], [18.1055, 53.5693], colors);
    // }

    function returnImgae() {
        var mycanvas = document.getElementById("canvasMap");
        return mycanvas.toDataURL("image/png");
    }

    // loadkriging();
    var that = this
    var temptureLayer = that.viewer.imageryLayers.addImageryProvider(new Cesium.SingleTileImageryProvider({
        url: returnImgae(),
        rectangle: new Cesium.Rectangle(
            Cesium.Math.toRadians(73.4766),
            Cesium.Math.toRadians(18.1055),
            Cesium.Math.toRadians(135.088),
            Cesium.Math.toRadians(53.5693)
        )
    }));
    temptureLayer.alpha = 0.8
    }

    
          
  },
  mounted() {
      this.initViewer()
      // this.initCharts()
      this.leftClick()
      this.addPoints()
      this.kriGing()
    },
};
</script>

<style scoped>
#cesiumContainer {
  height: 100%;
  width: 100%;
  /* z-index: 1; */
  /* z-index: -1; */
}


.leftbox {
  display: none;
  position: absolute;
  margin-left: 2vh;
  width: 38%;
  height: 100%;
  left: 0px;
  flex-direction: column;
  flex-wrap: nowrap;
}
.myChart1{
  flex: 1;
  margin-top: 2.5vh;
  margin-bottom: 2.5vh;
  z-index: 1;
  /* border: 1px solid red; */
    background: linear-gradient(to left, #f7ffc9, #f7ffc9) left top no-repeat,
    linear-gradient(to bottom, #f7ffc9, #f7ffc9) left top no-repeat,
    linear-gradient(to left, #f7ffc9, #f7ffc9) right top no-repeat,
    linear-gradient(to bottom, #f7ffc9, #f7ffc9) right top no-repeat,
    linear-gradient(to left, #f7ffc9, #f7ffc9) left bottom no-repeat,
    linear-gradient(to bottom, #f7ffc9, #f7ffc9) left bottom no-repeat,
    linear-gradient(to left, #f7ffc9, #f7ffc9) right bottom no-repeat,
    linear-gradient(to left, #f7ffc9, #f7ffc9) right bottom no-repeat;
    background-size: 3px 20px, 20px 3px, 3px 20px, 20px 3px;
}
.myChart2{
  flex: 1;
  margin-top: 2.5vh;
  margin-bottom: 2.5vh;
  z-index: 1;
  background: linear-gradient(to left, #f7ffc9, #f7ffc9) left top no-repeat,
    linear-gradient(to bottom, #f7ffc9, #f7ffc9) left top no-repeat,
    linear-gradient(to left, #f7ffc9, #f7ffc9) right top no-repeat,
    linear-gradient(to bottom, #f7ffc9, #f7ffc9) right top no-repeat,
    linear-gradient(to left, #f7ffc9, #f7ffc9) left bottom no-repeat,
    linear-gradient(to bottom, #f7ffc9, #f7ffc9) left bottom no-repeat,
    linear-gradient(to left, #f7ffc9, #f7ffc9) right bottom no-repeat,
    linear-gradient(to left, #f7ffc9, #f7ffc9) right bottom no-repeat;
    background-size: 3px 20px, 20px 3px, 3px 20px, 20px 3px;
}
.myChart3{
  flex: 1;
  margin-top: 2.5vh;
  margin-bottom: 2.5vh;
  z-index: 1;
  background: linear-gradient(to left, #f7ffc9, #f7ffc9) left top no-repeat,
    linear-gradient(to bottom, #f7ffc9, #f7ffc9) left top no-repeat,
    linear-gradient(to left, #f7ffc9, #f7ffc9) right top no-repeat,
    linear-gradient(to bottom, #f7ffc9, #f7ffc9) right top no-repeat,
    linear-gradient(to left, #f7ffc9, #f7ffc9) left bottom no-repeat,
    linear-gradient(to bottom, #f7ffc9, #f7ffc9) left bottom no-repeat,
    linear-gradient(to left, #f7ffc9, #f7ffc9) right bottom no-repeat,
    linear-gradient(to left, #f7ffc9, #f7ffc9) right bottom no-repeat;
    background-size: 3px 20px, 20px 3px, 3px 20px, 20px 3px;
}

.rightbox {
  display: none;
  position: absolute;
  margin-right: 2vh;
  width: 38%;
  height: 100%;
  right: 0%;
  flex-direction: column;
  flex-wrap: nowrap;
}
.myChart4{
  flex: 1;
  margin-top: 2.5vh;
  margin-bottom: 2.5vh;
  z-index: 1;
  background: linear-gradient(to left, #f7ffc9, #f7ffc9) left top no-repeat,
    linear-gradient(to bottom, #f7ffc9, #f7ffc9) left top no-repeat,
    linear-gradient(to left, #f7ffc9, #f7ffc9) right top no-repeat,
    linear-gradient(to bottom, #f7ffc9, #f7ffc9) right top no-repeat,
    linear-gradient(to left, #f7ffc9, #f7ffc9) left bottom no-repeat,
    linear-gradient(to bottom, #f7ffc9, #f7ffc9) left bottom no-repeat,
    linear-gradient(to left, #f7ffc9, #f7ffc9) right bottom no-repeat,
    linear-gradient(to left, #f7ffc9, #f7ffc9) right bottom no-repeat;
    background-size: 3px 20px, 20px 3px, 3px 20px, 20px 3px;
}
.myChart5{
  flex: 1;
  margin-top: 2.5vh;
  margin-bottom: 2.5vh;
  z-index: 1;
  background: linear-gradient(to left, #f7ffc9, #f7ffc9) left top no-repeat,
    linear-gradient(to bottom, #f7ffc9, #f7ffc9) left top no-repeat,
    linear-gradient(to left, #f7ffc9, #f7ffc9) right top no-repeat,
    linear-gradient(to bottom, #f7ffc9, #f7ffc9) right top no-repeat,
    linear-gradient(to left, #f7ffc9, #f7ffc9) left bottom no-repeat,
    linear-gradient(to bottom, #f7ffc9, #f7ffc9) left bottom no-repeat,
    linear-gradient(to left, #f7ffc9, #f7ffc9) right bottom no-repeat,
    linear-gradient(to left, #f7ffc9, #f7ffc9) right bottom no-repeat;
    background-size: 3px 20px, 20px 3px, 3px 20px, 20px 3px;
}
.myChart6{
  flex: 1;
  margin-top: 2.5vh;
  margin-bottom: 2.5vh;
  z-index: 1;
  background: linear-gradient(to left, #f7ffc9, #f7ffc9) left top no-repeat,
    linear-gradient(to bottom, #f7ffc9, #f7ffc9) left top no-repeat,
    linear-gradient(to left, #f7ffc9, #f7ffc9) right top no-repeat,
    linear-gradient(to bottom, #f7ffc9, #f7ffc9) right top no-repeat,
    linear-gradient(to left, #f7ffc9, #f7ffc9) left bottom no-repeat,
    linear-gradient(to bottom, #f7ffc9, #f7ffc9) left bottom no-repeat,
    linear-gradient(to left, #f7ffc9, #f7ffc9) right bottom no-repeat,
    linear-gradient(to left, #f7ffc9, #f7ffc9) right bottom no-repeat;
    background-size: 3px 20px, 20px 3px, 3px 20px, 20px 3px;
}
.infopopup{
  position: absolute;
  display: none;
  margin-top: 5vh;
  padding: 2%;
  border-radius:0.5rem;
  /* border-bottom-right-radius:0.6rem; */
  width: 12vw;
  left: 43.8%;
  z-index: 1;
  color: black;
  font-size: 2vh;
  background-color: white;
}
.list{
  position: absolute;
  display: block;
  margin-top: 5vh;
  padding: 1px;
  border-radius:0.05rem;
  /* border-bottom-right-radius:0.6rem; */
  width: 12vw;
  height: 4vh;
  right: 87.5%;
  z-index: 1;
  color: black;
  font-size:5px;
  text-align: center;
}
.listitem {
  font-size: large;

}

</style>